<template>
    <section class="form-warpper">
        <el-table :data="state.ruleForm" style="width: 100%" border>
            <el-table-column label="学校">
                <template #default="scope">
                    <el-input placeholder="请输入学校" size="mini" v-model="scope.row.schoolName"></el-input>
                </template>
            </el-table-column>
            <el-table-column label="阶段">
                <template #default="scope">
                    <el-select
                    v-model="scope.row.schoolStep"
                    placeholder="选择阶段"
                    size="mini" 
                    >
                    <el-option
                    v-for="dict in school_step"
                    :key="Number(dict.value)"
                    :label="dict.label"
                    :value="Number(dict.value)"
                     />
                    </el-select> 
                </template>
            </el-table-column>
            <el-table-column label="入学时间">
                <template #default="scope">
                    <el-date-picker value-format="YYYY-MM-DD" 
                        v-model="scope.row.startDate" type="date" 
                        placeholder="请选择入学时间" size="mini" />
                </template>
            </el-table-column>
            <el-table-column label="毕业时间">
                <template #default="scope">
                    <el-date-picker value-format="YYYY-MM-DD" 
                        v-model="scope.row.graduateDate" type="date" 
                        placeholder="请选择毕业时间" size="mini" />
                </template>
            </el-table-column>
            <el-table-column label="操作" width="100">
                <template #default="scope">
                    <el-button plan type="danger" size="mini" @click="removeHanlde(scope.row.id)">移除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-button plan type="primary" style="margin-top: 15px;" size="middle" @click="addReport">+ 新增</el-button>
    </section>
</template>

<script setup lang="ts">
import { reactive, defineExpose } from 'vue'
import {  getCurrentInstance} from 'vue';
import { formatDate } from '/@/utils/formatTime'


const { proxy } = getCurrentInstance();
const {school_step} = proxy.parseDict("school_step");
const initData = () => ({ schoolName: '', schoolStep: '', startDate: '', graduateDate: '', id: `${Date.now()}`});

interface IFormData {
    id: string | number, 
    schoolName: string, 
    schoolStep: string, 
    startDate: string, 
    graduateDate: string
}

const state = reactive({
    ruleForm: [
        { id: '', schoolName: '', schoolStep: '', startDate: '', graduateDate: ''}
    ] as Array<IFormData>
})

// 添加行
const addReport = () => {
    state.ruleForm.push({ id: `${Date.now()}`, schoolName: '', schoolStep: '', startDate: '', graduateDate: ''})
}

// 删除行
const removeHanlde = (id: string) => {
    state.ruleForm = state.ruleForm.filter(item => item.id !== id)
}

// 获取数据
const getData = () => {
    if(!state.ruleForm.length) {
        return [initData()]
    }
    return state.ruleForm 
}

// 数据回显
const setData = (list: Array<IFormData > | Array<any>) => { 
    if(list.length) {
        state.ruleForm = [];
        (list || []).forEach((item, index) => {
            state.ruleForm.push({
                id: item.id, 
                schoolName: item.schoolName, 
                schoolStep: item.schoolStep, 
                startDate: formatDate(new Date(item.startDate), 'YYYY-mm-dd HH:MM:SS'), 
                graduateDate: formatDate(new Date(item.graduateDate), 'YYYY-mm-dd HH:MM:SS')
            })
        }) 
    } 
}
// 暴露获取表单数据方法
defineExpose({ getData,setData })
</script>